<template>
    <Card :bordered="false" :dis-hover="true">
        <p slot="title" style="height: 40px">
            <Tag type="dot" color="yellow">今日随访：{{pageModel.totalSize}}位</Tag>
            <Button type="ghost" @click="search">查询</Button>
            <Button type="ghost" @click="resetCondition">重置条件</Button>
        </p>
        <Card :dis-hover="true" :bordered="false">
            <Form :label-width="100">
                <Row>
                    <Col span="4">
                        <FormItem label="患者姓名：">
                            <Input v-model="searchModal.patientName" placeholder="" style="width: 100%" @keyup.enter.native="quickSearch"></Input>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="病历号：">
                            <Input v-model="searchModal.medicalNumber" placeholder="" style="width: 100%" @keyup.enter.native="quickSearch"></Input>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="预约医生：">
                            <Select v-model="searchModal.doctorId" placeholder="" clearable style="width: 100%">
                                <Option v-for="item in doctors" :value="item.id" :key="item.id">{{ item.username }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="预约护士：">
                            <Select v-model="searchModal.nurseId" placeholder="" clearable style="width: 100%">
                                <Option v-for="item in nurses" :value="item.id" :key="item.id">{{ item.username }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem label="处理类型：">
                            <Select v-model="searchModal.process" placeholder="" clearable style="width: 100%">
                                <Option :value="1" :key="1">电话随访</Option>
                                <Option :value="2" :key="2">预约到店</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Card>
        <!--<p v-if="datas.length === 0" align="center">-->
            <!--<img width="20%" src="@/images/noData.png"></img>-->
        <!--</p>-->
        <Form ref="formInline" :label-width="100">
            <Row type="flex" :gutter="8">
                <Col v-for="(item,index) in datas" :key="index" span="12">
                    <Card style="width:100%;margin-top: 5px">
                        <p style="font-size: 18px" slot="title">
                            <Row>
                                <Col span="12">
                                    <label>{{item.patientName}} - {{item.medicalNumber}} | 信用分: {{item.score}}</label>
                                </Col>
                            </Row>
                        </p>
                        <a v-if="item.status === 0" href="#" slot="extra">
                            <Tag color="#5cadff">{{item.status | statusFilter}}</Tag>
                        </a>
                        <a v-if="item.status === 1" href="#" slot="extra">
                            <Tag color="#2d8cf0">{{item.status | statusFilter}}</Tag>
                        </a>
                        <a v-if="item.status === 2" href="#" slot="extra">
                            <Tag color="#ff9900">{{item.status | statusFilter}}</Tag>
                        </a>
                        <a v-if="item.status === 3" href="#" slot="extra">
                            <Tag color="#ed3f14">{{item.status | statusFilter}}</Tag>
                        </a>
                        <Row>
                            <Col span="6" align="center">
                                <p>预约类型：</p>
                            </Col>
                            <Col span="6">
                                <p v-if="item.type === 1"><Tag color="#ff9900">{{item.type | typeFilter}}</Tag></p>
                                <p v-if="item.type === 2"><Tag color="#19be6b">{{item.type | typeFilter}}</Tag></p>
                            </Col>
                            <Col span="6" align="center">
                                <p>预约时间：</p>
                            </Col>
                            <Col span="6">
                                <p>{{item.appointment | dateTimeFormatter}}</p>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="6" align="center">
                                <p>预约医生：</p>
                            </Col>
                            <Col span="6">
                                <p>{{item.doctorName}}</p>
                            </Col>
                            <Col span="6" align="center">
                                <p>预约护士：</p>
                            </Col>
                            <Col span="6">
                                <p>{{item.nurseName}}</p>
                            </Col>
                        </Row>
                        <Row>
                            <!--<Col span="6" align="center">-->
                                <!--<p>提醒方式：</p>-->
                            <!--</Col>-->
                            <!--<Col span="6">-->
                                <!--<p style="text-align: left">{{item.remind | remindFilter}}</p>-->
                            <!--</Col>-->
                            <Col span="6" align="center">
                                <p>预约专家：</p>
                            </Col>
                            <Col span="6">
                                <p style="text-align: left">{{item.expertName | valueFilter}}</p>
                            </Col>
                            <Col span="6" align="center">
                                <p>处理方式：</p>
                            </Col>
                            <Col span="6">
                                <p v-if="item.process === 1" style="text-align: left"><Tag color="blue">{{item.process | processFilter}}</Tag></p>
                                <p v-if="item.process === 2" style="text-align: left"><Tag color="#ed3f14">{{item.process | processFilter}}</Tag></p>
                            </Col>
                        </Row>
                        <Row style="margin-top: 5px">
                            <Col span="6" align="center">
                                <p>主管医生：</p>
                            </Col>
                            <Col span="6">
                                <p style="text-align: left">{{item.competentDoctor | valueFilter}}</p>
                            </Col>
                            <Col span="6" align="center">
                                <p>主管护士：</p>
                            </Col>
                            <Col span="6">
                                <p style="text-align: left">{{item.competentNurse | valueFilter}}</p>
                            </Col>
                        </Row>
                        <Row style="margin-top: 5px">
                            <Col span="6" align="center">
                                <p>主管客服：</p>
                            </Col>
                            <Col span="6">
                                <p style="text-align: left">{{item.customerName | valueFilter}}</p>
                            </Col>
                            <Col span="6" align="center">
                                <p>联系方式：</p>
                            </Col>
                            <Col span="6">
                                <p style="text-align: left"><Tag type="border" color="green">{{item.phone | valueFilter}}</Tag></p>
                            </Col>
                        </Row>
                        <Row style="margin-top: 5px">
                            <Col span="6" align="center">
                                <p>预约备注：</p>
                            </Col>
                            <Col span="18">
                                <a href="#">编辑</a>
                                <p style="height: 50px">{{item.note | noteFilter}}</p>
                            </Col>
                        </Row>
                        <p style="margin-top: 10px" align="right">
                            <ButtonGroup shape="circle">
                                <Button type="ghost" v-for="(button,index) in buttons" v-if="button.parentId === menuId" :key="index" :icon="button.icon" @click="events(button, item)">
                                    {{button.title}}
                                </Button>
                            </ButtonGroup>
                        </p>
                    </Card>
                </Col>
            </Row>
            <Card :bordered="false" :dis-hover="true">
                <p slot="title">&nbsp;</p>
                <iview-page
                        :totalSize="pageModel.totalSize"
                        :pageNumber="pageModel.pageNumber"
                        :pageSize="pageModel.pageSize"
                        :pageSizeOpts="pageModel.pageSizeOpts"
                        v-on="{changePageNumber:changePageNumber,changePageSize:changePageSize}">
                </iview-page>
            </Card>
        </Form>
    </Card>
</template>

<script>
    import iviewButton from '@/view/common/button/Button.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    export default {
        name: 'text-editor',
        components: {
            iviewButton,
            iviewPage
        },
        data () {
            const validateAppointment = (rule, value, callback) => {
                if (this.selectPane === '4') {
                    if (value === '') {
                        callback(new Error('请选择预约时间'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            };
            return {
                menuId: 2005,
                baseURL: '/user/reservation',
                selectRows: [],
                selectRow: {},
                datas: [],
                buttons: [],
                searchModal: {
                    patientName: '',
                    medicalNumber: '',
                    doctorId: '',
                    nurseId: '',
                    process: ''
                },
                doctors: [],
                nurses: [],
                pageModel: {
                    totalSize: 0,
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizeOpts: [10, 50, 100]
                }
            };
        },
        filters: {
            statusFilter (value) {
                let temp = ''
                if (value === 0) {
                    temp = '已预约'
                } else if (value === 1) {
                    temp = '已回访'
                } else if (value === 2) {
                    temp = '已到场'
                } else if (value === 3) {
                    temp = '已接诊'
                }
                return temp
            },
            typeFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '复诊'
                } else if (value === 2) {
                    temp = '新诊'
                }
                return temp
            },
            remindFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '短信'
                } else if (value === 2) {
                    temp = '微信'
                } else if (value === 3) {
                    temp = '电话'
                }
                return temp
            },
            processFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '电话随访'
                } else if (value === 2) {
                    temp = '预约到店'
                }
                return temp
            },
            valueFilter (value) {
                let temp = value
                if (!temp || temp === null || temp ==='NULL' || temp === '') {
                    return '无'
                }
                return temp
            },
            noteFilter (value) {
                let temp = value
                if (temp === '') {
                    temp = '未填写'
                }
                return temp
            }
        },
        methods: {
            events (item, row) {
                let path = item.path
                if (path === 'confirm') {
                    this.confirm(row)
                } else if (path === 'reAppointment') {
                    this.reAppointment(row)
                }
            },
            confirm (row) {
                let url = this.baseURL + '/visitConfirm/' + row.id
                this.$ajax.post(url).then(response => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.search()
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            reAppointment (row) {
                let url = this.baseURL + '/checkChange/' + row.id
                this.$ajax.get(url).then(response => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.toPath('/reservation/details', row)
                    } else {
                        this.$bus.alert('warning', msg)
                    }
                })
            },
            refresh () {
                this.search()
            },
            quickSearch () {
                this.pageModel.pageNumber = 1
                this.search()
            },
            search () {
                let queryModel = {
                    pageNumber: this.pageModel.pageNumber,
                    pageSize: this.pageModel.pageSize
                }
                this.searchModal.queryModel = queryModel
                let url = this.baseURL + '/visit'
                this.$ajax.post(url, this.searchModal).then((response) => {
                    let {code, data, params, msg} = response.data
                    if (code === 0) {
                        if (data.length > 0) {
                            this.datas = data
                            this.pageModel.pageNumber = params.pageNumber
                            this.pageModel.pageSize = params.pageSize
                            this.pageModel.totalSize = params.totalSize
                            this.$emit('getData2', data.length)
                        } else {
                            this.datas = []
                            this.$bus.alert('warning', '没有查询到任何信息')
                        }
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            resetCondition () {
                this.$bus.init(this.searchModal)
            },
            init () {
                this.load()
                // 加载按钮组
                this.loadButton()
                // 查询
                // this.search();
            },
            load () {
                // 加载医生数据
                this.loadDoctor()
                // 加载护士数据
                this.loadNurse()
            },
            loadDoctor () {
                this.$ajax.get('/user/findByJob/1').then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.doctors = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            loadNurse () {
                this.$ajax.get('/user/findByJob/2').then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.nurses = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            loadButton () {
                this.$ajax.get('/user/buttons/' + this.menuId).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.buttons = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
                this.refresh()
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
                this.refresh()
            }
        },
        mounted () {
            this.init()
        },
        beforeRouteLeave (to, from, next) {
            this.datas = []
            next()
        },
        watch: {
            // 'searchModal.patientName': function (val, oldValue) {
            //     this.search()
            // },
            // 'searchModal.medicalNumber': function (val, oldValue) {
            //     this.search()
            // },
            'searchModal.doctorId': function (val, oldValue) {
                this.pageModel.pageNumber = 1
                this.search()
            },
            'searchModal.nurseId': function (val, oldValue) {
                this.pageModel.pageNumber = 1
                this.search()
            },
            'searchModal.process': function (val, oldValue) {
                if (!val) {
                    this.searchModal.process = ''
                }
                this.pageModel.pageNumber = 1
                this.search()
            }
        }
    }
</script>

<style>
</style>
